<template>
  <div class="patrol-statistics-panel">
    <div class="patrol-header">
      <div class="header-icon">
        <svg viewBox="0 0 24 24">
          <path d="M12,2A2,2 0 0,1 14,2A2,2 0 0,1 16,4V8A2,2 0 0,1 14,10H10A2,2 0 0,1 8,8V4A2,2 0 0,1 10,2H12M10,4V8H14V4H10M12,10A6,6 0 0,1 18,16V18A2,2 0 0,1 16,20H8A2,2 0 0,1 6,18V16A6,6 0 0,1 12,10M12,12A4,4 0 0,0 8,16V18H16V16A4,4 0 0,0 12,12Z" fill="currentColor"/>
        </svg>
      </div>
      <div class="header-info">
        <h4 class="patrol-title">安全巡检统计</h4>
        <p class="patrol-subtitle">实时巡检状态与异常监控</p>
      </div>
    </div>

    <div class="patrol-stats">
      <div class="stat-row">
        <div class="stat-item active">
          <div class="stat-icon">
            <svg viewBox="0 0 24 24">
              <path d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.46,13.97L5.82,21L12,17.27Z" fill="currentColor"/>
            </svg>
          </div>
          <div class="stat-details">
            <div class="stat-value">{{ todayPatrols }}</div>
            <div class="stat-label">今日巡检</div>
          </div>
          <div class="stat-trend">
            <div class="trend-indicator up">
              <svg viewBox="0 0 24 24">
                <path d="M7,14L12,9L17,14H7Z" fill="currentColor"/>
              </svg>
              <span>+8.3%</span>
            </div>
          </div>
        </div>

        <div class="stat-item">
          <div class="stat-icon">
            <svg viewBox="0 0 24 24">
              <path d="M13,14H11V10H13M13,18H11V16H13M1,21H23L12,2L1,21Z" fill="currentColor"/>
            </svg>
          </div>
          <div class="stat-details">
            <div class="stat-value">{{ totalAlerts }}</div>
            <div class="stat-label">异常上报</div>
          </div>
        </div>
      </div>
    </div>

    <div class="patrol-statistics">
      <h5 class="section-title">
        <svg viewBox="0 0 24 24">
          <path d="M19,3H5C3.9,3 3,3.9 3,5V19C3,20.1 3.9,21 5,21H19C20.1,21 21,20.1 21,19V5C21,3.9 20.1,3 19,3M19,19H5V5H19V19M11,7H13V9H16V11H13V14H11V11H8V9H11V7Z" fill="currentColor"/>
        </svg>
        累计巡检统计
      </h5>
      
      <div class="statistics-grid">
        <div class="stat-card">
          <div class="stat-header">
            <div class="stat-icon">
              <svg viewBox="0 0 24 24">
                <path d="M16,17V19H2V17S2,13 9,13 16,17 16,17M12.5,7.5A3.5,3.5 0 0,1 9,11A3.5,3.5 0 0,1 5.5,7.5A3.5,3.5 0 0,1 9,4A3.5,3.5 0 0,1 12.5,7.5M15.94,13A5.32,5.32 0 0,1 18,17V19H22V17S22,13.37 15.94,13M15,4A3.39,3.39 0 0,1 16.5,7.5A3.39,3.39 0 0,1 15,11A3.39,3.39 0 0,1 13.5,7.5A3.39,3.39 0 0,1 15,4Z" fill="currentColor"/>
              </svg>
            </div>
            <div class="stat-title">本月累计</div>
          </div>
          <div class="stat-value-large">{{ monthlyTotal }}</div>
          <div class="stat-detail">次巡检完成</div>
        </div>

        <div class="stat-card">
          <div class="stat-header">
            <div class="stat-icon">
              <svg viewBox="0 0 24 24">
                <path d="M9,10V12H7V10H9M13,10V12H11V10H13M17,10V12H15V10H17M19,3A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H6V1H8V3H16V1H18V3H19M19,19V8H5V19H19M9,14V16H7V14H9M13,14V16H11V14H13M17,14V16H15V14H17Z" fill="currentColor"/>
              </svg>
            </div>
            <div class="stat-title">本周累计</div>
          </div>
          <div class="stat-value-large">{{ weeklyTotal }}</div>
          <div class="stat-detail">次巡检完成</div>
        </div>
      </div>
    </div>

    <div class="patrol-schedule">
      <h5 class="section-title">
        <svg viewBox="0 0 24 24">
          <path d="M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z" fill="currentColor"/>
        </svg>
        今日巡检状态
      </h5>
      
      <div class="schedule-items">
        <div 
          v-for="(plan, index) in patrolSchedule" 
          :key="plan.id"
          class="schedule-item"
          :class="plan.completed ? 'completed' : 'pending'"
          :style="{ animationDelay: index * 0.1 + 's' }"
        >
          <div class="schedule-indicator">
            <div class="schedule-icon">
              <svg v-if="plan.completed" viewBox="0 0 24 24">
                <path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" fill="currentColor"/>
              </svg>
              <svg v-else viewBox="0 0 24 24">
                <path d="M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M13,7H11V11H7V13H11V17H13V13H17V11H13V7Z" fill="currentColor"/>
              </svg>
            </div>
          </div>
          <div class="schedule-info">
            <div class="schedule-name">{{ plan.name }}</div>
            <div class="schedule-time">{{ plan.time }}</div>
            <div class="schedule-status">
              <span class="status-text" :class="plan.completed ? 'completed' : 'pending'">
                {{ plan.completed ? '已完成' : '待执行' }}
              </span>
              <span v-if="plan.completed" class="completion-time">{{ plan.completionTime }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="patrol-alerts">
      <h5 class="section-title">
        <svg viewBox="0 0 24 24">
          <path d="M10,21H14A2,2 0 0,1 12,23A2,2 0 0,1 10,21M21,19V20H3V19L5,17V11C5,7.9 7.03,5.17 10,4.29C10,4.19 10,4.1 10,4A2,2 0 0,1 12,2A2,2 0 0,1 14,4C14,4.1 14,4.19 14,4.29C16.97,5.17 19,7.9 19,11V17L21,19M12,6A4,4 0 0,0 8,10V16H16V10A4,4 0 0,0 12,6Z" fill="currentColor"/>
        </svg>
        异常处理状态
      </h5>
      
      <div class="alert-grid">
        <div 
          v-for="alert in alertCategories" 
          :key="alert.type"
          class="alert-item"
          :class="alert.priority"
        >
          <div class="alert-icon">
            <svg viewBox="0 0 24 24">
              <path :d="alert.icon" fill="currentColor"/>
            </svg>
          </div>
          <div class="alert-info">
            <div class="alert-name">{{ alert.type }}</div>
            <div class="alert-count">{{ alert.count }}起</div>
            <div class="alert-resolved" v-if="alert.resolved">
              <span class="resolved-text">已处理 {{ alert.resolved }}</span>
            </div>
          </div>
          <div class="alert-status">
            <div 
              class="status-indicator" 
              :class="alert.priority"
            ></div>
          </div>
        </div>
      </div>
    </div>

    <div class="patrol-issues">
      <h5 class="section-title">
        <svg viewBox="0 0 24 24">
          <path d="M13,13H11V7H13M11,15H13V17H11M15.73,3H8.27L3,8.27V15.73L8.27,21H15.73L21,15.73V8.27L15.73,3Z" fill="currentColor"/>
        </svg>
        异常统计汇总
      </h5>
      
      <div class="issues-grid">
        <div class="issue-card today">
          <div class="issue-icon">
            <svg viewBox="0 0 24 24">
              <path d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,17A1.5,1.5 0 0,1 10.5,15.5A1.5,1.5 0 0,1 12,14A1.5,1.5 0 0,1 13.5,15.5A1.5,1.5 0 0,1 12,17M12,10.5C10.67,10.5 9.69,9.04 10.06,7.76C10.47,6.5 11.85,5.96 13.11,6.44C14.04,6.78 14.5,7.52 14.5,8.5C14.5,9.59 13.59,10.5 12,10.5Z" fill="currentColor"/>
            </svg>
          </div>
          <div class="issue-content">
            <div class="issue-number">{{ todayIssues }}</div>
            <div class="issue-label">今日发现</div>
          </div>
        </div>

        <div class="issue-card week">
          <div class="issue-icon">
            <svg viewBox="0 0 24 24">
              <path d="M11,15H13V17H11V15M11,7H13V13H11V7M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20Z" fill="currentColor"/>
            </svg>
          </div>
          <div class="issue-content">
            <div class="issue-number">{{ weeklyIssues }}</div>
            <div class="issue-label">本周累计</div>
          </div>
        </div>

        <div class="issue-card resolved">
          <div class="issue-icon">
            <svg viewBox="0 0 24 24">
              <path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" fill="currentColor"/>
            </svg>
          </div>
          <div class="issue-content">
            <div class="issue-number">{{ resolvedIssues }}</div>
            <div class="issue-label">已处理</div>
          </div>
        </div>
      </div>
    </div>


  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  }
})

const todayPatrols = ref(24)
const totalAlerts = ref(3)

// 累计巡检统计
const monthlyTotal = ref(286)
const weeklyTotal = ref(68)

// 今日巡检状态
const patrolSchedule = ref([
  {
    id: 1,
    name: '核心景区安防巡检',
    time: '09:00',
    completed: true,
    completionTime: '09:32'
  },
  {
    id: 2,
    name: '设施维护巡检',
    time: '14:00',
    completed: true,
    completionTime: '14:28'
  },
  {
    id: 3,
    name: '夜间安全巡检',
    time: '20:00',
    completed: false,
    completionTime: null
  }
])

// 异常统计
const todayIssues = ref(2)
const weeklyIssues = ref(8)
const resolvedIssues = ref(6)

const alertCategories = ref([
  {
    type: '设备异常',
    count: 1,
    resolved: 1,
    priority: 'medium',
    icon: 'M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H16.5C17.33,14 18,14.67 18,15.5V16.5C18,17.33 17.33,18 16.5,18H15V22H9V18H7.5C6.67,18 6,17.33 6,16.5V15.5C6,14.67 6.67,14 7.5,14H9.29L9.56,13.73C8.59,12.59 8,11.11 8,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5A4.5,4.5 0 0,0 5,9.5A4.5,4.5 0 0,0 9.5,14A4.5,4.5 0 0,0 14,9.5A4.5,4.5 0 0,0 9.5,5Z'
  },
  {
    type: '环境监测',
    count: 2,
    resolved: 1,
    priority: 'low',
    icon: 'M17,8C8,10 5.9,16.17 3.82,21.34L5.71,22L6.66,19.7C7.14,19.87 7.64,20 8,20C19,20 22,3 22,3C21,5 14,5.25 9,6.25C4,7.25 2,11.5 2,13.5C2,15.5 3,16.75 3,16.75C7,15.25 7.97,14.97 9,15C10.03,15.03 11,16 11,16C11,16 10.5,17 9.5,17C8.5,17 8,16 7,16C6,16 3,17.25 3,17.25C3,17.25 4,18.5 4,19.75S3,22 3,22V22H5V20.25C5,18.25 6.5,16.5 8,16.5C10.5,16.5 12,18 12,18C12,18 14,16 16,16C18,16 19,17.25 19,18.5V22H21V22C21,22 20,20.75 20,19.5S21,17.25 21,17.25C21,17.25 18,16 17,16C16,16 15.5,17 14.5,17C13.5,17 13,16 13,16C13,16 13.97,15.03 15,15C16.03,14.97 17,15.25 21,16.75C21,16.75 22,15.5 22,13.5C22,11.5 20,7.25 15,6.25C13,5.75 11.5,5.5 10,5.5L17,8Z'
  },
  {
    type: '安全隐患',
    count: 0,
    resolved: 0,
    priority: 'high',
    icon: 'M12,1L3,5V11C3,16.55 6.84,21.74 12,23C17.16,21.74 21,16.55 21,11V5L12,1M12,7C13.4,7 14.8,8.6 14.8,10V11C15.4,11 16,11.4 16,12V16C16,16.6 15.6,17 15,17H9C8.4,17 8,16.6 8,16V12C8,11.4 8.4,11 9,11V10C9,8.6 10.6,7 12,7M12,8.2C11.2,8.2 10.2,9.2 10.2,10V11H13.8V10C13.8,9.2 12.8,8.2 12,8.2Z'
  }
])



// 模拟实时数据更新
onMounted(() => {
  // 更新今日巡检次数
  setInterval(() => {
    if (Math.random() < 0.1) { // 10% 概率增加
      todayPatrols.value += 1
      weeklyTotal.value += 1
      monthlyTotal.value += 1
    }
  }, 30000)
  
  // 模拟新的异常发现
  setInterval(() => {
    if (Math.random() < 0.05) { // 5% 概率发现新异常
      todayIssues.value += 1
      weeklyIssues.value += 1
      
      // 随机更新某个异常类别的计数
      const randomCategory = alertCategories.value[Math.floor(Math.random() * alertCategories.value.length)]
      randomCategory.count += 1
    }
  }, 60000)
  
  // 模拟异常处理
  setInterval(() => {
    if (Math.random() < 0.08 && resolvedIssues.value < todayIssues.value + weeklyIssues.value - 2) { // 8% 概率处理异常
      resolvedIssues.value += 1
      
      // 随机更新某个异常类别的已处理数量
      const categoriesWithIssues = alertCategories.value.filter(cat => cat.count > cat.resolved)
      if (categoriesWithIssues.length > 0) {
        const randomCategory = categoriesWithIssues[Math.floor(Math.random() * categoriesWithIssues.length)]
        randomCategory.resolved += 1
      }
    }
  }, 90000)
})
</script>

<style scoped>
.patrol-statistics-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(82, 183, 136, 0.3) transparent;
  padding: 0.2rem;
}

.patrol-statistics-panel::-webkit-scrollbar {
  width: 4px;
}

.patrol-statistics-panel::-webkit-scrollbar-track {
  background: transparent;
}

.patrol-statistics-panel::-webkit-scrollbar-thumb {
  background: rgba(82, 183, 136, 0.3);
  border-radius: 2px;
}

.patrol-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem;
  background: rgba(82, 183, 136, 0.08);
  border: 1px solid rgba(82, 183, 136, 0.2);
  border-radius: 10px;
  transition: all 0.3s ease;
}

.patrol-header:hover {
  background: rgba(82, 183, 136, 0.15);
  border-color: rgba(82, 183, 136, 0.4);
}

.header-icon {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(82, 183, 136, 0.15);
  border-radius: 6px;
  color: #52b788;
  flex-shrink: 0;
}

.header-icon svg {
  width: 16px;
  height: 16px;
}

.header-info {
  flex: 1;
  min-width: 0;
}

.patrol-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 0.1rem 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.patrol-subtitle {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.patrol-stats {
  background: rgba(82, 183, 136, 0.06);
  border: 1px solid rgba(82, 183, 136, 0.15);
  border-radius: 10px;
  padding: 0.8rem;
}

.stat-row {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem;
  background: rgba(82, 183, 136, 0.08);
  border: 1px solid rgba(82, 183, 136, 0.2);
  border-radius: 8px;
  transition: all 0.3s ease;
  min-height: auto;
}

.stat-item.active {
  background: rgba(82, 183, 136, 0.15);
  border-color: rgba(82, 183, 136, 0.3);
  box-shadow: 0 0 15px rgba(82, 183, 136, 0.2);
}

.stat-item:hover {
  background: rgba(82, 183, 136, 0.12);
  transform: translateY(-1px);
}

.stat-icon {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(82, 183, 136, 0.15);
  border-radius: 6px;
  color: #52b788;
  flex-shrink: 0;
}

.stat-icon svg {
  width: 14px;
  height: 14px;
}

.stat-details {
  flex: 1;
  min-width: 0;
}

.stat-value {
  font-size: 1rem;
  font-weight: bold;
  color: #52b788;
  text-shadow: 0 0 8px rgba(82, 183, 136, 0.5);
  margin-bottom: 0.1rem;
  white-space: nowrap;
}

.stat-label {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
}

.stat-trend {
  flex-shrink: 0;
}

.trend-indicator {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.7rem;
  font-weight: 600;
}

.trend-indicator.up {
  color: #66bb6a;
}

.trend-indicator svg {
  width: 10px;
  height: 10px;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: #52b788;
  margin: 0 0 0.6rem 0;
  padding: 0.4rem 0;
  border-bottom: 1px solid rgba(82, 183, 136, 0.2);
}

.section-title svg {
  width: 14px;
  height: 14px;
}

.progress-items {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.progress-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem;
  background: rgba(82, 183, 136, 0.04);
  border: 1px solid rgba(82, 183, 136, 0.1);
  border-radius: 8px;
  transition: all 0.3s ease;
  animation: slideInLeft 0.5s ease-out;
}

.progress-item:hover {
  background: rgba(82, 183, 136, 0.1);
  border-color: rgba(82, 183, 136, 0.2);
}

.plan-indicator {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.plan-icon {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
}

.plan-info {
  flex: 1;
  min-width: 0;
}

.plan-name {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 0.2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.plan-status {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
}

.status-text {
  font-weight: 600;
  white-space: nowrap;
}

.status-text.active {
  color: #52b788;
}

.status-text.completed {
  color: #66bb6a;
}

.status-text.pending {
  color: #95a5a6;
}

.plan-percentage {
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
}

.plan-chart {
  width: 40px;
  height: 5px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
  flex-shrink: 0;
}

.plan-bar {
  height: 100%;
  border-radius: 2px;
  transition: width 0.8s ease;
}

.alert-grid {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.alert-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem;
  background: rgba(82, 183, 136, 0.04);
  border: 1px solid rgba(82, 183, 136, 0.1);
  border-radius: 6px;
  transition: all 0.3s ease;
}

.alert-item:hover {
  background: rgba(82, 183, 136, 0.1);
  border-color: rgba(82, 183, 136, 0.2);
}

.alert-item.high {
  border-color: rgba(255, 112, 67, 0.3);
  background: rgba(255, 112, 67, 0.06);
}

.alert-item.medium {
  border-color: rgba(255, 171, 64, 0.3);
  background: rgba(255, 171, 64, 0.06);
}

.alert-item.low {
  border-color: rgba(102, 187, 106, 0.3);
  background: rgba(102, 187, 106, 0.06);
}

.alert-icon {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #52b788;
  flex-shrink: 0;
}

.alert-item.high .alert-icon {
  color: #ff7043;
}

.alert-item.medium .alert-icon {
  color: #ffab40;
}

.alert-item.low .alert-icon {
  color: #66bb6a;
}

.alert-icon svg {
  width: 12px;
  height: 12px;
}

.alert-info {
  flex: 1;
  min-width: 0;
}

.alert-name {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 0.1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.alert-count {
  font-size: 0.8rem;
  font-weight: 600;
  color: #52b788;
}

.alert-item.high .alert-count {
  color: #ff7043;
}

.alert-item.medium .alert-count {
  color: #ffab40;
}

.alert-resolved {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 0.1rem;
}

.alert-status {
  flex-shrink: 0;
}

.status-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #52b788;
}

.status-indicator.high {
  background: #ff7043;
  box-shadow: 0 0 8px rgba(255, 112, 67, 0.5);
}

.status-indicator.medium {
  background: #ffab40;
  box-shadow: 0 0 8px rgba(255, 171, 64, 0.5);
}

.status-indicator.low {
  background: #66bb6a;
  box-shadow: 0 0 8px rgba(102, 187, 106, 0.5);
}

/* 累计巡检统计样式 */
.statistics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}

.stat-card {
  padding: 0.6rem;
  background: rgba(82, 183, 136, 0.06);
  border: 1px solid rgba(82, 183, 136, 0.15);
  border-radius: 8px;
  text-align: center;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #52b788, #66bb6a);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.stat-card:hover {
  background: rgba(82, 183, 136, 0.12);
  border-color: rgba(82, 183, 136, 0.3);
  transform: translateY(-1px);
}

.stat-card:hover::before {
  opacity: 1;
}

.stat-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  margin-bottom: 0.4rem;
}

.stat-header .stat-icon {
  width: 16px;
  height: 16px;
  color: #52b788;
}

.stat-header .stat-icon svg {
  width: 14px;
  height: 14px;
}

.stat-title {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
}

.stat-value-large {
  font-size: 1.4rem;
  font-weight: bold;
  color: #52b788;
  text-shadow: 0 0 10px rgba(82, 183, 136, 0.6);
  margin-bottom: 0.2rem;
}

.stat-detail {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.6);
}

/* 今日巡检状态样式 */
.schedule-items {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.schedule-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem;
  background: rgba(82, 183, 136, 0.04);
  border: 1px solid rgba(82, 183, 136, 0.1);
  border-radius: 6px;
  transition: all 0.3s ease;
  animation: slideInLeft 0.6s ease;
}

.schedule-item:hover {
  background: rgba(82, 183, 136, 0.1);
  border-color: rgba(82, 183, 136, 0.2);
}

.schedule-item.completed {
  border-color: rgba(102, 187, 106, 0.3);
  background: rgba(102, 187, 106, 0.06);
}

.schedule-item.pending {
  border-color: rgba(255, 171, 64, 0.3);
  background: rgba(255, 171, 64, 0.06);
}

.schedule-indicator {
  flex-shrink: 0;
}

.schedule-icon {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #66bb6a;
}

.schedule-item.pending .schedule-icon {
  color: #ffab40;
}

.schedule-icon svg {
  width: 12px;
  height: 12px;
}

.schedule-info {
  flex: 1;
  min-width: 0;
}

.schedule-name {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 0.1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.schedule-time {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 0.1rem;
}

.schedule-status {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.status-text {
  font-size: 0.65rem;
  font-weight: 500;
}

.status-text.completed {
  color: #66bb6a;
}

.status-text.pending {
  color: #ffab40;
}

.completion-time {
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.5);
}

/* 异常统计汇总样式 */
.issues-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

.issue-card {
  padding: 0.6rem 0.4rem;
  border-radius: 8px;
  text-align: center;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.issue-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.issue-card.today {
  background: rgba(255, 112, 67, 0.08);
  border: 1px solid rgba(255, 112, 67, 0.2);
}

.issue-card.today::before {
  background: linear-gradient(90deg, #ff7043, #ff5722);
}

.issue-card.week {
  background: rgba(255, 171, 64, 0.08);
  border: 1px solid rgba(255, 171, 64, 0.2);
}

.issue-card.week::before {
  background: linear-gradient(90deg, #ffab40, #ff9800);
}

.issue-card.resolved {
  background: rgba(102, 187, 106, 0.08);
  border: 1px solid rgba(102, 187, 106, 0.2);
}

.issue-card.resolved::before {
  background: linear-gradient(90deg, #66bb6a, #4caf50);
}

.issue-card:hover {
  transform: translateY(-1px);
}

.issue-card:hover::before {
  opacity: 1;
}

.issue-icon {
  width: 20px;
  height: 20px;
  margin: 0 auto 0.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  padding: 0.2rem;
}

.issue-card.today .issue-icon {
  background: rgba(255, 112, 67, 0.15);
  color: #ff7043;
}

.issue-card.week .issue-icon {
  background: rgba(255, 171, 64, 0.15);
  color: #ffab40;
}

.issue-card.resolved .issue-icon {
  background: rgba(102, 187, 106, 0.15);
  color: #66bb6a;
}

.issue-icon svg {
  width: 12px;
  height: 12px;
}

.issue-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.issue-number {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 0.1rem;
}

.issue-card.today .issue-number {
  color: #ff7043;
  text-shadow: 0 0 8px rgba(255, 112, 67, 0.5);
}

.issue-card.week .issue-number {
  color: #ffab40;
  text-shadow: 0 0 8px rgba(255, 171, 64, 0.5);
}

.issue-card.resolved .issue-number {
  color: #66bb6a;
  text-shadow: 0 0 8px rgba(102, 187, 106, 0.5);
}

.issue-label {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
}



@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media screen and (max-width: 1400px) {
  .statistics-grid {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  
  .issues-grid {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }
  
  .issue-card {
    padding: 0.5rem 0.3rem;
  }
  
  .schedule-item {
    padding: 0.4rem;
    gap: 0.5rem;
  }
  
  .stat-item {
    padding: 0.5rem;
    gap: 0.5rem;
  }
  
  .stat-icon {
    width: 24px;
    height: 24px;
  }
  
  .stat-icon svg {
    width: 12px;
    height: 12px;
  }
}
</style> 